<!DOCTYPE html>
<html>
  <head>
    <title>MERRA Report</title>
    {% load staticfiles %}
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
        
      <div class="page-header">
        <h1 class="text-center">MERRA Graphs</h1>
      </div>
      
      <div class="row">
        <div class="col-sm-6">
          <div class="caption text-center">Average Soil Wetness</div>
          <img src="{{GWETTOP_avg}}" class="img-responsive"></img>
        </div>
        <div class="col-sm-6">
          <div class="caption text-center">Total Land Precipitation </div>
          <img src="{{PRECTOTLAND_avg}}" class="img-responsive"></img>
        </div>
      </div>

      <hr>
      
      <div class="row">
        <div class="col-sm-6">
          <div class="caption text-center">Average Latent Heat Flux</div>
          <img src="{{LHLAND_avg}}" class="img-responsive"></img>
        </div>
        <div class="col-sm-6">
          <div class="caption text-center">Average Sensible Heat Flux</div>
          <img src="{{SHLAND_avg}}" class="img-responsive"></img>
        </div>
      </div>

      <hr>

      <div class="row">
        <div class="col-sm-4">
          <div class="caption text-center">Minimum Surface Temperature</div>
          <img src="{{TSURF_min}}" class="img-responsive"></img>
        </div>
        <div class="col-sm-4">
          <div class="caption text-center">Maximum Surface Temperature</div>
          <img src="{{TSURF_max}}" class="img-responsive"></img>
        </div>
        <div class="col-sm-4">
          <div class="caption text-center">Average Surface Temperature</div>
          <img src="{{TSURF_avg}}" class="img-responsive"></img>
        </div>
      </div>
      
      <div class="row">
        <hr>
        <div class="col-sm-6">
            <h4 class="text-left">NASA Wrangler</h4>
        </div>
        <div class="col-sm-6">
            <h4 class="text-right">{{dateTime}}</h4>
        </div>
      </div>

    </div>
  </body>  
</html>
  